<template>
    <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageHelp.currentPage"
      :page-sizes="paginationData.pagesizes"
      :page-size="pageHelp.pagesize"
      :layout="paginationData.layout"
      :total="paginationData.total"
    ></el-pagination>
    </div>
</template>

<script>
export default {
  props: {
    paginationData: {
      total: Number,
      pagesize: Number,
      pagesizes: Array,
      currentPage: Number,
      layout: String
    }
  },
  data() {
    return {
      pageHelp:{
        pagesize: this.paginationData.pagesize,
        currentPage: this.paginationData.currentPage
      }     
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageHelp.pagesize = val;
    },
    handleCurrentChange(val) {
      this.pageHelp.currentPage = val;
    }
  },
  watch: {
    pageHelp:{
      handler:function(){
        this.$emit("childrenData", this.pageHelp);
      },
      deep:true
    }
  }
};
</script>

<style>
.pagination {
    margin: 15px 0;
    text-align: right;
}
</style>